<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            background-color: red;
        }
        .box2{
            /* width: 1200px;
            height: 1200px; */
            width: 400px;
            height: 400px;
            background-image: url("1.jpg");
            background-repeat: no-repeat;
            /* background-size: 1200px 1200px; */
            /* background-size: 50% 50%; */
            /* background-size: cover; */
            /* background-size: contain; */
            background-position: left center;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    
    <!-- background-repeat属性
    该属性设置如何平铺背景图像
    repeat：默认值 水平垂直都平铺
    repeat-x：只向水平方向平铺
    repeat-y：只向垂直方向平铺
    no-repeat：不平铺 -->
    
    <!-- background-size属性
    该属性设置背景图像大小
    length：设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
    percentage：计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
    cover：保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
    contain：保持图片纵横比并将图像缩放成适合背景定位区域的最大大小 -->

    <!-- background-position属性
    该属性设置背景图像的起始位置，其默认值是：0% 0%
    left top：左上角
    left center：左中
    left bottom：左下
    right top：右上角
    right center：右中
    right bottom：右下
    center top：中上
    center center：中中
    center bottom：中下
    x% y%：第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100%。
    如果只指定了一个位置，其他值默认是50%。默认是0% 0%
    xpos ypos：单位是像素 -->


</body>
</html>